import QuestionTitleConf, { QuestionTitlePropsType } from './QuestionTitle'
import QuestionParagraphConf, { QuestionParagraphPropsType } from './QuestionParagraph'
import QuestionInfoConf, { QuestionInfoPropsType } from './QuestionInfo'

import QuestionInputConf, { QuestionInputPropsType } from './QuestionInput'
import QuestionTextareaConf, { QuestionTextareaPropsType } from './QuestionTextarea'

import QuestionRadioConf, { QuestionRadioPropsType, QuestionRadioStateType } from './QuestionRadio'
import QuestionCheckboxConf, {
  QuestionCheckboxPropsType,
  QuestionCheckboxStatPropsType,
} from './QuestionCheckbox'

export type ComponentPropsType = QuestionInputPropsType &
  QuestionTitlePropsType &
  QuestionParagraphPropsType &
  QuestionInfoPropsType &
  QuestionTextareaPropsType &
  QuestionRadioPropsType &
  QuestionCheckboxPropsType

export type ComponentStateType = QuestionRadioStateType & QuestionCheckboxStatPropsType

export type ComponentConfType = {
  title: string
  type: string
  component: React.FC<ComponentPropsType>
  propComponent: React.FC<ComponentPropsType>
  statComponent?: React.FC<ComponentStateType>
  defaultProps: ComponentPropsType
}

// 全部组件配置列表
const componentConfList: ComponentConfType[] = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionTextareaConf,
  QuestionRadioConf,
  QuestionCheckboxConf,
]

// 组件分组
export const componentGroupList = [
  {
    group: '文本显示',
    components: [QuestionInfoConf, QuestionTitleConf, QuestionParagraphConf],
  },
  {
    group: '用户输入',
    components: [QuestionInputConf, QuestionTextareaConf],
  },
  {
    group: '用户选择',
    components: [QuestionRadioConf, QuestionCheckboxConf],
  },
]

export const getComponentConfByType = (type: string) =>
  componentConfList.find(item => item.type === type)
